<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Assoc Marker Render Test</title>
  <script src="../../_libs/raphael-min.2.0.1.js"></script>
  <script src="../../../src/kekule.js?min=false&locals=en,zh&language=zh"></script>
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />
  <script name="pyrrole" id="pyrrole" type="chemical/x-mdl-molfile">
Untitled Document-2
  Kekule  11201418212D

  5  5  0  0  0  0  0  0  0  0999 V2000
    0.4125    0.6348    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.4125    0.6348    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.6674   -0.1498    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.0000   -0.6348    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
    0.6674   -0.1498    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0
  2  3  2  0
  3  4  1  0
  4  5  1  0
  5  1  2  0
M  END
	</script>
  <script name="cyclohexane" id="cyclohexane" type="chemical/x-mdl-molfile">
未命名
  Kekule  00131821022D

  6  6  0  0  0  0  0  0  0  0999 V2000
   10.1349   43.1771    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   10.8278   42.7771    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    9.4421   42.7771    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   10.8278   41.9771    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    9.4421   41.9771    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   10.1349   41.5771    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0  0  0  0
  1  3  1  0  0  0  0
  2  4  1  0  0  0  0
  3  5  1  0  0  0  0
  4  6  1  0  0  0  0
  5  6  1  0  0  0  0
M  END
  </script>

  <script>
    function getMol()
    {
      return Kekule.Widget.getWidgetById('chemViewer').getChemObj();
    }

    function createTextMarker(text, coord2D)
    {
      var result = new Kekule.TextBlock(null, text || 'M', coord2D || {'x': 0, 'y': 0});
      return result;
    }
    function createChargeMarker(coord2D)
    {
      return new Kekule.ChemMarker.Charge(null, coord2D/* || {'x': 0, 'y': 0}*/);
    }
    function createRadicalMarker(coord2D)
    {
      return new Kekule.ChemMarker.Radical(null, coord2D);
    }

    function addAttachedMarkers()
    {
      var viewer = Kekule.Widget.getWidgetById('chemViewer');
      var mol = viewer.getChemObj();
      //mol.appendMarker(createTextMarker('Mol'));
      mol.setRenderOption('distinguishSingletAndTripletRadical', true);

      mol.getNodes().forEach(function(node){
        //var marker = createTextMarker('A');

        node.setCharge(2);
        //node.setRadical(3);
        var marker = createChargeMarker();
        //marker.setValue(3);
        node.appendMarker(marker);
        //node.autoSetMarker2DPos(marker, 1, true);
        //var marker = createRadicalMarker();
        //node.appendMarker(marker);
        //node.autoSetMarker2DPos(marker, 1, true);
        //node.appendMarker(new Kekule.ChemMarker.UnbondedElectronSet());
      });

      viewer.repaint();
    }
    function inspect()
    {
      var viewer = Kekule.Widget.getWidgetById('chemViewer');
      var mol = viewer.getChemObj();
      var objInspector = Kekule.Widget.getWidgetById('objInspector');
      objInspector.setObjects([]);
      objInspector.setObjects(mol);
    }
  </script>
</head>
<body>
  <div>
    <button id="btnAddMarker" data-widget="Kekule.Widget.Button" onclick="addAttachedMarkers()">Add Marker</button>
    <button id="btnInspect" data-widget="Kekule.Widget.Button" onclick="inspect()">Inspect</button>
  </div>
  <div id="chemViewer" data-widget="Kekule.ChemWidget.Viewer" data-chem-obj="url('#pyrrole')" data-show-caption="false" data-caption="Molecule" data-resizable='true' data-enable-edit-from-void="true"
     data-predefined-setting="fullFunc" data-auto-size1="true"
     style="width:600px;height:400px;border:1px solid #666"></div>
  <div id="objInspector" data-widget="Kekule.Widget.ObjectInspector"></div>
</body>
</html>